<template>
  <div class="classify-detail">
    <nav-bar text="多肉"></nav-bar>
    <div class="content">
      <better-scroll>
        <banner url="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg">
          <div class="img-count">
            <svg-icon name="album" color="#141414"></svg-icon>
            <span>95张</span>
          </div>
        </banner>
        <ul class="details-info">
          <li class="detail-item" v-for="(item, idx) in 3" :key="idx">
            <div class="preview">
              <img src="https://cdn.pixabay.com/photo/2014/08/25/14/12/pansy-427139_960_720.png" alt="">
            </div>
            <section class="text"><span>观赏价值：</span>用自己喜欢的多肉打造出不同风格的造型，看着它们错落有致，充满艺术感，放在庭院、窗边或者送一盆给重要的人，注入了情感的多肉植物盆栽也会变得意义非凡。 而制作的过程中，植株的选择，色彩的搭配都是需要掌握的一门技巧。掌握了色彩的搭配，能够最大限度的发挥多肉植物的叶色个性。 多肉植物的颜色丰富多彩，多种颜色搭配会给人营造一种热烈时尚的氛围，但是色彩搭配过度，就会显得杂乱无章。 1、多色对比盆栽。将深色多肉作为主角，比如红色，栽种在中间，会很醒目。用与红色相反的绿色作为辅色，黄色作为过渡色，银色作为点缀色，把不同色彩的植物比邻栽种，起到相互映衬的作用。 2、辅色对比盆栽。红色和绿色、紫色和黄色、蓝色和橙色，运用辅色这种反差性的搭配，会给人眼前一亮的感觉。</section>
          </li>
        </ul>
      </better-scroll>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import Banner from '@/components/Banner.vue'
import BetterScroll from '@/components/BetterScroll.vue'
export default {
  components: {
    NavBar,
    Banner,
    BetterScroll
  }
}
</script>

<style scoped>
.classify-detail {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.content {
  height: calc(100% - 96px);
  width: 100%;
}
.img-count {
  position: absolute;
  bottom: 14px;
  right: 46px;
  display: flex;
  align-items: center;
}
.img-count > span {
  font-size: 24px;
  color: #141414;
  margin-left: 10px;
}
.details-info {
  padding: 33px 39px 33px 22px;
}
.detail-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 50px;
}
.detail-item:last-child {
  margin-bottom: 0;
}
.preview {
  width: 199px;
  height: 199px;
  background-color: #f2f2f2;
  margin-right: 28px;
  flex-shrink: 0;
}
.preview > img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.text {
  font-size: 24px;
  color: #333;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.text > span {
  font-size: 36px;
  font-weight: bold;
}
</style>
